import React from 'react';
import { Component } from 'react';

require('./Order.scss');

export default class Order extends Component {
    constructor() {
        super();
    }
    render() {
        var foodClassify = [
            '热销','优惠','半价','套餐','甜点','小吃','咖啡','饮料','酒水','小菜','主食'
        ];
        var foods = [
            {name: "黄焖鸡", imageSrc:"1.png", food_introduction:"好吃的杨明宇黄焖鸡米饭", monthlySale: 95, praiseRate: 98, price: 18},
            {name: "米饭", imageSrc:"1.png", food_introduction:"好吃的米饭", monthlySale: 45, praiseRate: 90, price: 1},
            {name: "蛋糕", imageSrc:"1.png", food_introduction:"好吃的蛋糕", monthlySale: 55, praiseRate: 96, price: 5},
            {name: "猫屎咖啡", imageSrc:"1.png", food_introduction:"好喝的猫屎咖啡", monthlySale: 41, praiseRate: 91, price: 15},
            {name: "王老吉", imageSrc:"1.png", food_introduction:"好喝的王老吉", monthlySale: 32, praiseRate: 88, price: 5},
            {name: "可乐", imageSrc:"1.png", food_introduction:"好喝的可乐", monthlySale: 12, praiseRate: 76, price: 3.5},
            {name: "雪碧", imageSrc:"1.png", food_introduction:"好喝的雪碧", monthlySale: 10, praiseRate: 23, price: 3},
            {name: "榨菜", imageSrc:"1.png", food_introduction:"好吃的榨菜", monthlySale: 12, praiseRate: 13, price: 2},
            {name: "江小白", imageSrc:"1.png", food_introduction:"好喝的江小白", monthlySale: 10, praiseRate: 23, price: 3},
            {name: "老村长", imageSrc:"1.png", food_introduction:"好喝的老村长", monthlySale: 12, praiseRate: 13, price: 2},
        ];
        return (
            <div className="order_wrapper">
                <navigator className="food_classify_list">
                {
                    foodClassify.map((item, index)=>{
                        return <div className="food_classify" key={index}>{item}</div>
                    })
                }
                </navigator>
                <section className="food_list">
                    {
                        foods.map((food, index)=>{
                            return  <div className="food_item" key={index}>
                                    <div className="food_img"><img src={`client/images/${food.imageSrc}`}></img></div>
                                    <div className="food_detail">
                                        <div className="food_name">{food.name}</div>
                                        <div className="food_introduction">{food.food_introduction}</div>
                                        <div className="food_comment">{`月售${food.monthlySale}份 好评率${food.praiseRate}%`}</div>
                                        <div className="food_buy">
                                            <div className="food_price">{food.price}</div>
                                            <div className="add_to_car"></div>
                                        </div>
                                    </div>
                                </div>
                            
                        })
                    }
                </section>
                <footer className="shopping_cart">
                    <div className="shopping_cart_logo"><img src="client/images/shopping_cart.png"></img></div>
                    <div className="goods_total_price">￥25</div>
                    <div className="settlement_button">去结算</div>
                </footer>
            </div>
        );
    }
}